<template>
  <div class="base-layout">
    <!-- 左侧菜单栏 -->
    <div class="menu-sidebar">
      <!-- 头像区域 -->
      <div class="menu-profile">
        <img :src="avatarUrl" alt="avatar" class="menu-avatar">
        <div class="status-dot"></div>
      </div>
      
      <!-- 主要菜单 -->
      <div class="menu-top">
        <div 
          v-for="menu in mainMenus" 
          :key="menu.key"
          class="menu-item" 
          :class="{ active: currentView === menu.key }"
          @click="switchView(menu.key)"
          :title="menu.text"
        >
          <i :class="menu.icon"></i>
        </div>
      </div>

      <!-- 底部菜单 -->
      <div class="menu-bottom">
        <div 
          v-for="menu in bottomMenus" 
          :key="menu.key"
          class="menu-item"
          :class="{ active: currentView === menu.key }"
          @click="switchView(menu.key)"
          :title="menu.text"
        >
          <i :class="menu.icon"></i>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 菜单配置
const mainMenus = [
  { key: 'chat', icon: 'ri-message-3-line', text: '消息' },
  { key: 'contacts', icon: 'ri-contacts-line', text: '通讯录' },
  { key: 'favorites', icon: 'ri-star-line', text: '收藏' },
  { key: 'files', icon: 'ri-folder-line', text: '文件' }
]

const bottomMenus = [
  { key: 'settings', icon: 'ri-settings-3-line', text: '设置' }
]

// 修改默认头像路径
const avatarUrl = new URL('../assets/images/avatars/default.svg', import.meta.url).href

// 当前视图
const currentView = ref('chat')

// 切换视图
const switchView = (view) => {
  currentView.value = view
  emit('view-change', view)
}

// 定义事件
const emit = defineEmits(['view-change'])
</script>

<style scoped>
.base-layout {
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--bg-default);
  position: fixed;
  inset: 0;
}

.menu-sidebar {
  width: 64px;
  background: var(--bg-paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  border-right: 1px solid var(--border-light);
}

.menu-profile {
  position: relative;
  margin-bottom: 30px;
}

.menu-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.menu-avatar:hover {
  transform: scale(1.1);
}

.status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #10b981;
  border-radius: 50%;
  border: 2px solid white;
}

.menu-item {
  width: 64px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-default);
  position: relative;
  margin: 2px 0;
}

.menu-item i {
  font-size: 1.3rem;
  transition: var(--transition-default);
  z-index: 2;
}

.menu-item::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 100%;
  background: var(--bg-hover);
  transform: translate(-50%, -50%);
  transition: var(--transition-default);
  z-index: 1;
  opacity: 0;
}

.menu-item:hover::before {
  width: 100%;
  opacity: 1;
}

.menu-item.active {
  color: var(--text-primary);
}

.menu-item.active i {
  transform: scale(1.1);
}

.menu-item.active::before {
  width: 100%;
  opacity: 1;
  background: linear-gradient(to right, var(--bg-hover) 30%, var(--bg-active) 100%);
}

.menu-top {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.menu-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}
</style> 